<template>
  <div class="news-detail">
    <!-- 标题 -->
    <div class="news-header">
      <h1 class="news-title">{{ news.title }}</h1>
      <div class="news-meta">
        <span>作者：{{ news.author }}</span>
        <span>发布时间：{{ formatTime(news.createTime) }}</span>
      </div>
    </div>

    <!-- 正文内容 -->
    <div class="news-content">
      <p>{{ news.content }}</p>
    </div>

    <!-- 评论区 -->
    <div class="comment-section" ref="commentSection">
      <h3>评论</h3>
      <div v-if="news.comments && news.comments.length > 0" class="comment-list">
        <div v-for="comment in news.comments" :key="comment.id" class="comment-item">
          <div class="comment-header">
            <img :src="comment.user.avatar" class="user-avatar" />
            <span class="user-name">{{ comment.user.name }}</span>
            <span class="comment-time">{{ comment.time }}</span>
          </div>
          <p class="comment-content">{{ comment.content }}</p>
        </div>
      </div>
      <div v-else class="no-comments">
        暂无评论
      </div>
    </div>

    <!-- 底部导航栏 -->
    <van-action-bar>
      <van-action-bar-button text="评论" @click="scrollToComments" />
    </van-action-bar>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import axios from '../utils/axios.ts'

const route = useRoute()
const news = ref({
  // 添加默认值避免空值错误
  title: '',
  author: '',
  createTime: '',
  content: '',
  comments: []
})

const commentSection = ref(null)

const fetchNewsDetail = async () => {
  const id = route.params.id
  try {
    // 使用模拟数据，因为没有实际API
    const mockNews = {
      id: id,
      title: "唐舞桐建模进化史：5大建模一次看够",
      coverImage: "https://img.yzcdn.cn/vant/cat.jpeg",
      content: "绝世唐门女主多次变换身份，从最初的青涩少女到后来的成熟女神，她的建模也在不断进化。在最新剧集中，唐舞桐的造型更是美出了新高度，让人眼前一亮。从早期的青涩少女造型，到中期的成熟女性装扮，再到现在的仙气飘飘，每一次变化都让粉丝们惊喜不已。特别是她与霍雨浩的感情线，更是让无数观众为之动容。",
      createTime: "2025-09-12T10:07:49",
      author: "云漫菌",
      comments: [
        {
          id: 1,
          user: {
            name: "动漫迷",
            avatar: "https://img.yzcdn.cn/vant/cat.jpeg"
          },
          content: "闺女建模变来变去，亲爹还是赢家啊",
          time: "2025-09-12"
        },
        {
          id: 2,
          user: {
            name: "斗罗粉丝",
            avatar: "https://img.yzcdn.cn/vant/cat.jpeg"
          },
          content: "期待新一集的更新，希望剧情能更紧凑一些",
          time: "2025-09-13"
        }
      ]
    };

    news.value = mockNews;

    // 如果有实际API，使用下面的代码
    // const res = await axios.get(`/api/news/detail?id=${id}`)
    // news.value = res.data
  } catch (error) {
    console.error('获取新闻详情失败:', error)
  }
}

const scrollToComments = () => {
  if (commentSection.value) {
    commentSection.value.scrollIntoView({ behavior: 'smooth' })
  }
}

const formatTime = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleDateString()
}

onMounted(() => {
  fetchNewsDetail()
})
</script>

<style scoped>
.news-detail {
  padding: 16px;
  background-color: #f7f8fa;
  padding-bottom: 60px; /* 为底部导航栏留出空间 */
}

.news-header {
  background: white;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.news-title {
  font-size: 18px;
  margin: 0 0 12px 0;
}

.news-meta {
  font-size: 12px;
  color: #999;
}

.news-content {
  background: white;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.news-content p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.comment-section {
  background: white;
  padding: 16px;
  border-radius: 8px;
}

.comment-section h3 {
  margin-top: 0;
}

.comment-list {
  margin-top: 16px;
}

.comment-item {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
}

.user-name {
  font-size: 14px;
  color: #333;
}

.comment-time {
  font-size: 12px;
  color: #999;
  margin-left: 8px;
}

.comment-content {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  margin: 0;
}

.no-comments {
  text-align: center;
  color: #999;
  padding: 20px;
}
</style>
